<style scoped>
.question-cell {
	padding-top: 10px;
}
.input-item {
    margin-left: 45px !important;
    width: 250px;
}

.input-item2 {
    margin-left: 45px;
    width: 275px;
}

.input-item3 {
    margin-left: 45px;
    width: 100px;
}

.formitem {
    margin-left: 30px;
}
.option-cell {
    padding-top: 10px
}
.option-input {
    width: 300px;
    margin-left:45px
}
.option-other {
    display: inline-block;
    margin-left:45px;
    padding: 5px 0
}
</style>
<template>
	<div class="question-cell">
		<Form ref="formData" :model="formValidate" :rules="ruleValidate" inline>
            <FormItem label="标题" :label-width="100" prop="title">
                <Input class="input-item" placeholder="输入标题" v-model="formValidate.title"></Input>
			</FormItem>
			<!-- <FormItem label="说明描述" :label-width="100" class="formitem" prop="memo">
				<Input class="input-item2" placeholder="输入说明描述" v-model="formValidate.memo"></Input>
			</FormItem> -->       
            <FormItem label="选择数量" :label-width="100" class="formitem" prop="selection_max">
                <InputNumber class="input-item3" :max="optionList.length" :min="1" v-model="formValidate.selection_max"></InputNumber>
            </FormItem>   
            <FormItem
                label="跳转至"
                :label-width="100"
                prop="goto"
            >
                <Goto
                    class="input-item"
                    v-model="formValidate.goto"
                    :list="list"
                    :except="sort"
                />
            </FormItem>     
		</Form>
        <div class="option-cell" v-for="(item, index) in optionList">
            <Icon type="ios-remove-circle-outline" 
                style="width: 100px;text-align:right" size="24" color="#f00" @click="delOption(index)"/>
            <div v-if="optionList[index].indexOf('==!>') == 0" class="option-other">其他 (用户输入选项)</div>
            <Input placeholder="选项..." class="option-input" v-model="optionList[index]" v-else/>
        </div>
        <div class="option-cell" >
            <Button type="info" style="margin-left: 145px" @click="addOption" icon="md-add">添加选项</Button>
            <Button type="text" style="margin-left: 20px" @click="addOtherOption" icon="md-add">添加其他选项</Button>
        </div>
            
	</div>
</template>
<script>
import optionParse from '../js/optionParse'
import Goto from './goto'
export default {
    props: {
        title: String,
        memo: String,
        selection_max: String,
        selection: String,
        list: Array,
        goto: String,
        sort: String
    },
    data() {
        return {
            optionList: ['',''],
            formValidate: {
            	title: '',
                memo: '',
                selection_max: 1,
                goto: '0'
            },
            ruleValidate: {
            	title: [{
                    required: true,
                    message: '标题不能为空',
                    trigger: 'blur'
                }],
                memo: [{
                    required: false,
                    message: '说明不能为空',
                    trigger: 'blur'
                }],
                selection_max: [{
                    required: true,
                    type: 'number',
                    message: '最大选择数量',
                    trigger: 'blur'
                }],
                goto: [{
                    required: true,
                    message: '跳转选项必填',
                    trigger: 'blur'
                }]
            },
        }
    },
    components: {
        Goto
    },
    watch: {
        title: function (newValue, oldValue) {
            this.formValidate.title = newValue
        },
        memo: function (newValue, oldValue) {
            this.formValidate.memo = newValue
        },
        goto: function (newValue, oldValue) {
            this.formValidate.goto = newValue
        },
        selection: function (newValue, oldValue) {
           if (newValue.length > 0) {
                // 兼容新版
                this.optionList = optionParse(this.selection)
            }
            else {
                this.optionList = ['','']
            }
        },
        formValidate: {
            handler(newValue, oldValue) {
    　　　　　　 console.log('watched')
                if (newValue.title != this.title) {
                    this.$emit('update:title', newValue.title)
                }
                if (newValue.memo != this.memo) {
                    this.$emit('update:memo', newValue.memo)
                }
                if (newValue.selection_max != this.selection_max) {
                    this.$emit('update:selection_max', newValue.selection_max.toString())
                }
                if (newValue.goto != this.goto) {
                    this.$emit('update:goto', newValue.goto)
                }
    　　　　},
    　　　　deep: true
        },
        optionList: {
            handler(newValue, oldValue) {
                this.$emit('update:selection', JSON.stringify(newValue))
            },
            deep: true
        }
    },
    created() {
        this.formValidate.title = this.title
        this.formValidate.memo = this.memo
        this.formValidate.goto = this.goto
        if (this.selection.length > 0) {
            this.optionList = optionParse(this.selection)
        }
        this.formValidate.selection_max = parseInt(this.selection_max)
    },
    methods: {
        delOption(index) {
            console.log(index)
            if (this.optionList.length > 2) {
                this.optionList.splice(index, 1)

                if (this.formValidate.selection_max > this.optionList.length) { this.formValidate.selection_max--}
            }
            else {
                this.$Modal.info({title: "注意",content: "至少保留两个选项！"})
            }
        },
        addOption(e) {
            this.optionList.push('')
        },
        addOtherOption(e) {
            this.optionList.push('==!>')
        }
    }
};
</script>
